<template>

  <el-card style="margin: 0 20px 20px 0;">
    <div>
      <el-descriptions title="博客数据" :column="column">
        <el-descriptions-item label="文章数">{{ active }}</el-descriptions-item>
        <el-descriptions-item label="粉丝数">{{ followers }}</el-descriptions-item>
        <el-descriptions-item label="点赞数">{{ like }}</el-descriptions-item>
        <el-descriptions-item label="阅读数"> {{ read }}</el-descriptions-item>

      </el-descriptions>

      <el-descriptions title="趋势图" />
      <el-date-picker
        v-model="value1"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <div id="myChart" :style="{ width: '100%', height: '300px' }" />
    </div>
  </el-card>

</template>
<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { getUserFollowers, getUserFollowings, getUserHomePage, myfollowers } from '@/api/news/pc-web/user'
import { getUserArticleViewHistory, getUserArticleCollections, getUserArticleLikings, getUserArticle, getUserReport, getmylist, articlenumbers } from '@/api/news/pc-web/article'
import { getArticleList, deleteArticle, getArticleCategoryList } from '@/api/article'
export default {
  name: 'Hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      value1: '',
      column: 4,
      queryInfo: {
        pageNum: 1, // 分页页码
        pageSize: 10 // 页面数据条数

      },
      active: '',
      followers: '',
      like: '',
      read: '',
      datatime: []
    }
  },
  mounted() {
    this.search()
    this.times()
  },
  methods: {

    times() {
      var myDate = new Date() // 获取今天日期
      myDate.setDate(myDate.getDate() - 6)
      var dateArray = []
      var dateTemp
      var flag = 1
      for (var i = 0; i < 7; i++) {
        dateTemp = moment().subtract(7 - i, 'days').format('YYYY-MM-DD')
        dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
      }

      this.datatime = dateArray
      this.drawChart()
    },

    async search() {
      const user_id = this.$store.state.user.userInfo.id
      const { total } = await getArticleList(
        this.queryInfo
      )
      console.log(total)
      this.active = total
      const res = await getUserFollowers(user_id, this.query)

      this.followers = res.total

      const info = await articlenumbers(user_id)
      console.log(info, 'info')
      this.like = info.like
      this.read = info.read
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const that = this
      var chartDom = document.getElementById('myChart')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },

        legend: {
          data: ['文章数', '点赞数', '收藏数']
        },
        xAxis: [
          {
            type: 'category',
            data: that.datatime,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          }
          // {
          //   type: 'value',
          //   name: 'Temperature',
          //   min: 0,
          //   max: 25,
          //   interval: 5,
          //   axisLabel: {
          //     formatter: '{value}'
          //   }
          // }
        ],
        series: [
          {
            name: '文章数',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '点赞数',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '收藏数',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    }

  }
}
</script>
